<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }" @submit="handleSubmit">
        <a-row>
          <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="产品编号">
              <a-input allow-clear placeholder="请输入产品编号" v-model="formContent.sccode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="产品名称">
              <a-input allow-clear placeholder="请输入产品名称" v-model="formContent.scname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="产品大类">
              <a-select style="width: 100%" placeholder="请选择产品大类" v-model="formContent.scdl"
                @focus="getDictChildList('PRODUCT_BIGTYPE', 'scdlList')" allow-clear>
                <a-select-option :value="item.code" v-for="(item, index) in scdlList" :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
            <a-form-item label="产品小类">
              <a-select style="width: 100%" placeholder="请选择产品小类" v-model="formContent.scxl"
                @focus="getDictChildList('PRODUCT_SMALLTYPE', 'scxlList')" allow-clear>
                <a-select-option :value="item.code" v-for="(item, index) in scxlList" :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="产品细分">
                <a-select style="width: 100%" placeholder="请选择产品细分" v-model="formContent.scxfl"
                  @focus="getDictChildList('PRODUCT_MINISMALLTYP', 'scxflList')" allow-clear>
                  <a-select-option :value="item.code" v-for="(item, index) in scxflList" :key="index">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="厂家编号">
                <a-input allow-clear placeholder="请输入厂家编号" v-model="formContent.sccshh"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="供应厂商">
                <a-select style="width: 100%" placeholder="请选择供应厂商" v-model="formContent.scsupid"
                @search="getScsupidList" allow-clear :filterOption="filterOption">
                <a-select-option v-for="(item) in scsupidList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="对应上货季">
                <a-select style="width: 100%" placeholder="请选择供应厂商" v-model="formContent.scseason"
                @focus="getDictChildList('SEASON', 'scseasonList')" allow-clear>
                <a-select-option v-for="(item) in scseasonList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="关联编号">
                <a-input allow-clear placeholder="请输入关联编号" v-model="formContent.screlation"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="关联类型">
                <a-select style="width: 100%" placeholder="请选择关联类型" v-model="formContent.screlationtype"
                @focus="getDictChildList('PRODUCT_RELATIONTYPE', 'relationtypeList')" allow-clear>
                <a-select-option v-for="(item) in relationtypeList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="产品备注">
                <a-input allow-clear placeholder="请输入产品备注" v-model="formContent.scmemo"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="加工类型">
                <a-select style="width: 100%" placeholder="请选择加工类型" v-model="formContent.scprocesstype"
                @focus="getDictChildList('PRODUCT_TECHNOLOGY', 'processtypeList')" allow-clear>
                <a-select-option v-for="(item) in processtypeList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="底/面编号">
                <a-input allow-clear placeholder="请输入底/面编号" v-model="formContent.scisprocess"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="底布名称">
                <a-input allow-clear placeholder="请输入底布名称" v-model="formContent.sclowername"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="其他底布">
                <a-input allow-clear placeholder="请输入其他底布" v-model="formContent.sclowerothers"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="有效门幅">
                <a-input allow-clear placeholder="请输入有效门幅" v-model="formContent.scmf"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="平方克重">
                <a-input allow-clear placeholder="请输入平方克重" v-model="formContent.scmlkz"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="产品规格">
                <a-input allow-clear placeholder="请输入产品规格" v-model="formContent.scspec"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="产品单价">
                <a-input allow-clear placeholder="最小值" v-model="formContent.scpriceMin" style="width:110px"></a-input> -
                <a-input allow-clear placeholder="最大值" v-model="formContent.scpriceMax" style="width:110px;"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="产品外观">
                <a-select style="width: 100%" placeholder="请选择产品外观" v-model="formContent.scappearance"
                @focus="getDictChildList('PRODUCT_APPEARANCE', 'appearanceList')" allow-clear>
                <a-select-option v-for="(item) in appearanceList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="布面效果">
                <a-select style="width: 100%" placeholder="请选择布面效果" v-model="formContent.sceffect"
                @focus="getDictChildList('PRODUCT_EFFECT', 'effectList')" allow-clear>
                <a-select-option v-for="(item) in effectList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="面料特性">
                <a-select style="width: 100%" placeholder="请选择面料特性" v-model="formContent.scquality"
                @focus="getDictChildList('PRODUCT_CHARACTERISTIC', 'scqualityList')" allow-clear>
                <a-select-option v-for="(item) in scqualityList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="产品工艺">
                <a-select style="width: 100%" placeholder="请选择产品工艺" v-model="formContent.scfjgy"
                @focus="getDictChildList('PRODUCT_TECH', 'scfjgyList')" allow-clear>
                <a-select-option v-for="(item) in scfjgyList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="进口产地">
                <a-select style="width: 100%" placeholder="请选择进口产地" v-model="formContent.scimportarea"
                @focus="getDictChildList('PRODUCT_IMPORT', 'scimportareaList')" allow-clear>
                <a-select-option v-for="(item) in scimportareaList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="原料产地">
                <a-select style="width: 100%" placeholder="请选择原料产地" v-model="formContent.scenvironmental"
                @focus="getDictChildList('PRODUCT_ORIGIN', 'environmentalList')" allow-clear>
                <a-select-option v-for="(item) in environmentalList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="8" :md="8" :lg="12" :xl="8" :xxl="6">
              <a-form-item label="服用功能">
                <a-select style="width: 100%" placeholder="请选择原料产地" v-model="formContent.scfzyt"
                @focus="getDictChildList('PRODUCT_FUNCTION', 'scfzytList')" allow-clear>
                <a-select-option v-for="(item) in scfzytList" :key="item.code" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :sm="8" :md="8" :lg="12" style="margin-left:20px">
            <span style="float: left;overflow: hidden;">
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button type="primary" style="margin-left: 10px" @click="add">新建</a-button>
              <a style="margin-left: 10px" download :href="downUrl" class="export-btn ant-btn-primary ant-btn">导入模版下载</a>
              <!-- <a-button type="primary" style="margin-left: 10px" @click="downTem">下载模版</a-button> -->
              <a-button type="primary" style="margin-left: 10px" @click="toExport">批量导入修改</a-button>
              <a-button type="primary" style="margin-left: 10px" @click="reset">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <a-table bordered :loading="loading" :pagination="pagination" :customRow="loadCustomRow" :columns="columns"
        :data-source="dataSource" @change="handleTableChange">
        <template slot="status" slot-scope="txt, record">
          <span v-if="record.status == 10">草稿</span>
          <span v-else-if="record.status == 20">启用</span>
          <span v-else-if="record.status == 30">停用</span>
          <span v-else>无效</span>
        </template>
        <template slot="img" slot-scope="txt, record">
            <img v-if="record.schavpict.length > 2" :src="record.schavpict" :alt="record.schavpict" @click="showImg(1,record.schavpict)"
              style="width:100px;height:100px;object-fit: contain;cursor:pointer"/>
        </template>
        <template slot="action" slot-scope="txt, record">
          <a class="mr-10" @click="toDetail(record)">
            查看
          </a>
          <a class="mr-10" @click="edit(record)">
            修改
          </a>

          <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteMaterial(record)" v-if="record.status == 10">
            <a class="mr-10">
              删除
            </a>
          </a-popconfirm>
          <a
            class="mr-10"
            @click="doOperation(record, 20)"
            v-if="record.status == 10"
          >
            应用
          </a>
          <a class="mr-10" @click="doOperation(record, 30)" v-if="record.status == 20">
            停用
          </a>
          <a class="mr-10" @click="doOperation(record, 20)" v-if="record.status == 30">
            启用
          </a>
          <a class="mr-10" @click="toFile(record)">
            附件查看
          </a>
        </template>
      </a-table>
      <fileInfo v-if="showFile" :sccode="sccode" @close="close"></fileInfo>
      <exportList v-if="showExport" @closeExport="closeExport"></exportList>
    </a-card>
    <BigImg :visibleImgs="visibleImgs" :imgList="imgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>

  </div>
</template>

<script>
import fileInfo from './fileList.vue'
import exportList from './export.vue'
import { getSampleList, getDictChildList, dowmTem, sampleStatus ,seachSupply} from '@api/material/index'
import { postAction } from '@/api/manage'
import BigImg from '@/views/box/components/UserMsg/bigImg'

const columns = [
  {
    title: '产品编号',
    width: 120,
    dataIndex: 'sccode',
  },
  {
    title: '产品名称',
    width: 220,
    dataIndex: 'scname'
  },
  {
    title: '产品单价',
    dataIndex: 'scprice'
  },
  {
    title: '产品成分',
    dataIndex: 'sccf'
  },
  {
    title: '平方克重',
    dataIndex: 'scmlkz'
  },
  {
    title: '有效门幅',
    dataIndex: 'scmf'
  },
  {
    title: '应用状态',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'img' }
  },
  {
    title: '操作',
    width: 220,
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    fileInfo,
    exportList,
    BigImg
  },
  data() {
    return {
      urlKey: 'basemgt-material/',
      columns,
      bag: {},
      downUrl:'',
      form: this.$form.createForm(this),
      showFile: false,
      sccode: '',
      visibleImgs: false,
      goToIndex: 0,
      imgList: [],
      account: '',
      groupName: '',
      toggleSearchStatus: false,
      loading: false,
      showExport:false,
      dataSource: [],
      prevImageUrl: [],
      auth: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      },
      scdlList: [],
      scxlList: [],
      scxflList: [],
      scsupidList: [],
      scseasonList: [],
      scqualityList: [],
      scimportareaList: [],
      appearanceList: [],
      effectList: [],
      elasticList: [],
      stiffnessList: [],
      environmentalList: [],
      seniormaterialList: [],
      materiallevelList: [],
      scfjgyList: [],
      scshksList: [],
      scfzytList: [],
      relationtypeList: [],
      processtypeList: [],
      lowercodeList: [],
      lowersmalltypeList: [],
      patternList: [],
      lowerminismallList: [],
      classifyMinimumList: [],
      formContent: {
        scxfl: undefined,
        screlation: '',
        screlationtype: undefined,
        scisprocess: undefined,
        scprocesstype: undefined,
        scappearance: undefined,
        sceffect: undefined,
        scenvironmental: undefined,
        sclowername: '',
        sclowerothers: '',
        sccf: "",
        sccode: "",
        sccshh: "",
        scdl: undefined,
        scfjgy: undefined,
        scfzyt: undefined,
        scimportarea: undefined,
        scmemo: "",
        scmf: "",
        scmlkz: "",
        scname: "",
        scpriceMin: '',
        scpriceMax: '',
        scquality: undefined,
        scseason: undefined,
        scshks: undefined,
        scsupid: undefined,
        scxl: undefined,
      }
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  created(){
    const apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot"
    this.downUrl = apiBaseUrl + '/api/gateway/basemgt-material/sample-cloth/export'
  },
  mounted() {
    this.loadData()
    this.getScsupidList()
  },

  methods: {
    filterOption(input, option) {
      if (option && option.props && option.props.title) {
        return option.props.title === input || option.props.title.indexOf(input) !== -1
      } else {
        return true
      }
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    loadCustomRow(record, index) {
      return {
        on: {
          dblclick: () => {
            this.$router.push({ path: '/material-file/material/add', query: { sccode: record.sccode } })
          }
        }
      }
    },
    toFile(record) {
      this.showFile = true
      this.sccode = record.sccode
    },
    reset(){
      this.formContent = {
        scxfl: undefined,
        screlation: '',
        screlationtype: undefined,
        scisprocess: undefined,
        scprocesstype: undefined,
        scappearance: undefined,
        sceffect: undefined,
        scenvironmental: undefined,
        sclowername: '',
        sclowerothers: '',
        sccf: "",
        sccode: "",
        sccshh: "",
        scdl: undefined,
        scfjgy: undefined,
        scfzyt: undefined,
        scimportarea: undefined,
        scmemo: "",
        scmf: "",
        scmlkz: "",
        scname: "",
        scprice: '',
        scquality: undefined,
        scseason: undefined,
        scshks: undefined,
        scsupid: undefined,
        scxl: undefined,
      }
    },
    toExport() {
      this.showExport = true
    },
    closeExport() {
      this.showExport = false
    },
    close() {
      this.showFile = false
    },
    async downTem() {
      dowmTem({}).then(data => {
        if (!data || data.code == 500) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }),'批量导入模版.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '批量导入模版.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    async getScsupidList(value) {
      const res = await seachSupply({ keyWord: value })
      if (res.code == 200) {
        this.scsupidList = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取供应商列表失败！')
        }
      }
    },
    showImg(index, url) {
      this.imgList.push(url)
      this.goToIndex = index
      setTimeout(() => {
        this.visibleImgs = true
      }, 100)
    },
    closeBig(value) {
      this.visibleImgs = value
      setTimeout(() => {
        this.imgList = []
      }, 200)
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.getSampleList(1)
    },
    add() {
      this.$router.push(`/material-file/material/add`)
    },
    edit(record) {
      this.$router.push({ path: '/material-file/material/add', query: { sccode: record.sccode } })
    },
    toDetail(record) {
      this.$router.push({ path: '/material-file/material/detail', query: { sccode: record.sccode } })
    },
    loadData() {
      this.getSampleList()
    },
    async getDictChildList(name, list) {
      const params = {
        name: name
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this[list] = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取数据字典失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取数据字典失败！')
      }
    },
    
    async getSampleList(key) {
      this.loading = true
      const params = this.formContent
      params.current = this.pagination.current
      params.size = this.pagination.pageSize
      if (key) {
        params.current = 1
      }
      try {
        const res = await getSampleList(params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('获取列表失败！')
      } finally {
        this.loading = false
      }
    },
    async deleteMaterial(record) {
      let params = {
        sccode: record.sccode,
        status: 40
      }
      const res = await sampleStatus(params)
      if (res.code == 200) {
        this.$message.success('删除成功！')
        this.loadData()
      } else {
        this.$message.warning(res.msg)
      }
    },
    async doOperation(record, operate) {
      let params = {
        sccode: record.sccode,
        status: operate
      }
      const res = await sampleStatus(params)
      if (res.code == 200) {
        this.$message.success('状态更新成功！')
        this.loadData()
      } else {
        this.$message.warning(res.msg)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}

.mr-10 {
  // margin-left: 3px;
}
</style>